<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" href="images/favicon.ico">
        <title>Web前端技术学习</title>
        <link href="fontawesome/css/all.min.css" rel="stylesheet">
        <style>
            html,body,div,ul,li,ol,dl,dd{margin:0;padding:0;}
            ul,li,ol,dd{list-style:none;}
            a{text-decoration:none;}
            /*整体结构*/
            #header{position:fixed;top:0;left:0;right:0;height:50px;border-bottom:1px solid #eee; display:flex;display:-webkit-flex;align-items:center;justify-content:space-between;flex-wrap: wrap;}
            #sideBar{position:fixed;top:50px;left:0;bottom:0;width:220px;border-right:1px solid #ccc;}
            #content{position:fixed;top:50px;left:220px;right:0;bottom:40px;}
            #footer{position:fixed;left:220px;bottom:0;right:0;height:40px;line-height:40px;border-top:1px solid #ccc;color:#666;}
            
            /*头部样式*/
            #header span{box-sizing: border-box;}
            #header .title{font-size:20px;font-weight:bold;color:#9ebcf5;padding-left:20px;width:220px;letter-spacing: 2px;background-color:#302f2f;height:50px;line-height:50px;border-bottom:1px solid #3b3a3a;}
            #header .search{padding:0 20px;flex-grow: 1;}
            #header .info{padding-right:20px;}
            #header .input-control{width:400px;height:30px;border:1px solid #eee;margin-right:10px;}
            #header .input-control:focus{outline:none;border:0;box-shadow: 1px 1px 5px #16aa85;}

            /*左侧菜单栏*/
            #sideBar{background-color:#302f2f;}
            #sideBar ul{box-sizing: border-box;}
            .menu a{box-sizing:border-box;display:inline-block;padding-left:20px;height:40px;line-height:40px;width:100%;background-color: #2f2f2f;color:#ddd;border-bottom:1px solid #3d3d3d;}
            .menu a:hover{background-color: #16aa85;}
            .smenu,.tmenu{display:none;overflow:hidden;}
            .smenu a{padding-left:40px;background-color: #4f4f4f;}
            .tmenu a{padding-left:60px;}
            #sideBar .actived{background-color: #16aa85;}

            /*图标样式*/
            #sideBar .fa{line-height:40px;margin-right:5px;}

            /*内容导航*/
            .nav{height:30px;line-height:30px;color:#7a7a7a;border-bottom:1px solid #ddd;box-shadow:0px 1px 1px #abb0e3;box-sizing: border-box;padding-left:20px;}
           
            /*iframe样式*/
            #contentFrame{width:100%;height:calc(100% - 30px);}

        </style>
    </head>
    <body>
        <div id="header">
            <span class="title">Web前端技术学习</span>
            <span class="search"><input class="input-control" type="text" placeholder="搜索..."><input type="submit" value="搜索" style="cursor:pointer;"></span>
            <span class="info">欢迎，管理员</span>
        </div>
        <div id="sideBar">
            <ul class="menu">
                <li><a class="actived" href="javascript:openMenu('/ 首页','main.html');"><i class="fa fa-home fa-sm"></i>首页</a></li>
                <li>
                    <a href="javascript:openMenu('/ 系统管理');"><i class="fa fa-cog fa-sm"></i>系统管理<i class="fa fa-sm fa-sort-desc" style="position:absolute;right:10px;"></i></a>
                    <ul class="smenu">
                        <li><a href="javascript:openMenu('/ 系统管理 / 机构管理','org.html');"><i class="fa fa-sitemap fa-sm"></i>机构管理</a></li>
                        <li><a href="javascript:openMenu('/ 系统管理 / 用户管理','user.html');"><i class="fa fa-user fa-sm"></i>用户管理</a></li>
                        <li><a href="javascript:openMenu('/ 系统管理 / 角色管理','role.html');"><i class="fa fa-users fa-sm"></i>角色管理</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:openMenu('/ 系统监控','');"><i class="fa fa-desktop fa-sm"></i>系统监控<i class="fa fa-sm fa-sort-desc" style="position:absolute;right:10px;"></i></a>
                    <ul class="smenu">
                        <li>
                            <a href="javascript:openMenu('/ 系统监控 / 日志管理');"><i class="fa fa-eye fa-sm"></i>日志管理<i class="fa fa-sm fa-sort-desc" style="position:absolute;right:10px;"></i></a>
                            <ul class="tmenu">
                                <li><a href="javascript:openMenu('/ 系统监控 / 日志管理 / 登录日志');"><i class="fa fa-laptop fa-sm"></i>登录日志</a></li>
                                <li><a href="javascript:openMenu('/ 系统监控 / 日志管理 / 操作日志');"><i class="fa fa-terminal fa-sm"></i>操作日志</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:openMenu('/ 系统监控 / 系统资源');"><i class="fa fa-reorder fa-sm"></i>系统资源</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="content">
            <div id="contentNav" class="nav">
                / 首页
            </div>
            <iframe id="contentFrame" src="main.html" frameborder="0"></iframe>
        </div>
        <div id="footer">
            &copy; 2024
        </div>
        <script>
            window.onload = function(){
                let menuItems = document.querySelectorAll('.menu a');//获取所有的菜单项链接

                menuItems.forEach(item => {
                    //针对每个菜单项链接添加点击事件
                    item.onclick = function(e){
                        let brotherItems = item.parentNode.children;//查找当前菜单项的兄弟节点
                        if(brotherItems.length > 1){//存在兄弟节点的执行相关操作
                            e.preventDefault();
                            for(let i=0;i<brotherItems.length;i++){
                                if(brotherItems[i] != item){//排除当前菜单项
                                    //兄弟节点如果隐藏的，则显示，否则隐藏
                                    if(brotherItems[i].style.display === 'none'||brotherItems[i].style.display === ''){
                                       //brotherItems[i].style.display = 'block';
                                       slideDown(brotherItems[i],200);
                                       //console.log(item.children[1]);
                                       item.children[1].setAttribute("class",'fa fa-sm fa-sort-asc') ;
                                        //其他二级节点全部隐藏
                                        let smenu = document.querySelectorAll('.smenu');
                                        for(let j=0;j<smenu.length;j++){
                                            //console.log(smenu[j]);
                                            //console.log(brotherItems[i].parentNode);
                                            //如果当前点击的是三级节点，则排除其祖级的二级节点，其他的都隐藏
                                            if(smenu[j] != brotherItems[i]&&brotherItems[i].parentNode.parentNode != smenu[j]){
                                                //smenu[j].style.display = 'none';
                                                slideUp(smenu[j],200);
                                                smenu[j].parentNode.children[0].children[1].setAttribute("class",'fa fa-sm fa-sort-desc') ;
                                            }
                                        }
                                    }else{
                                        //brotherItems[i].style.display = 'none';
                                        slideUp(brotherItems[i],200);
                                        item.children[1].setAttribute("class",'fa fa-sm fa-sort-desc') ;
                                    }
                                }
                            }
                        }else{
                            let allItems = document.querySelectorAll("#sideBar a");
                            for(let i=0;i<allItems.length;i++){
                                allItems[i].setAttribute("class","");
                            }
                            item.setAttribute("class","actived");

                        }
                    }
                });
            }
            
            //动画效果，下滑展开
            function slideDown(elem,time){
                elem.style.display = 'block';
                
                let elemHeight = elem.offsetHeight;//获取元素的高度
                let currHeight = 0;//当前元素高度
                let speed = elemHeight/(time/5);
                elem.style.height = '0px';
                
                let timer = setInterval(function(){
                    currHeight += speed;
                    elem.style.height = currHeight + 'px';
                    if(currHeight >= elemHeight){
                        clearInterval(timer);
                        elem.style.height = 'auto';
                       
                    }
                },5);
            }
            //动画效果，上滑收起
            function slideUp(elem,time){
                let elemHeight = elem.offsetHeight;//获取元素的高度
                let currHeight = elemHeight;//当前元素高度
                let speed = elemHeight/(time/5);
                //elem.style.height = elemHeight + 'px';
                let timer = setInterval(function(){
                    currHeight -= speed;
                    elem.style.height = currHeight + 'px';
                    
                    if(currHeight <= 0){
                        clearInterval(timer);
                        elem.style.display = 'none';
                        elem.style.height = 'auto';
                    }
                });
            }
            function openMenu(title,url){
                document.getElementById("contentNav").innerHTML=title;
                document.getElementById("contentFrame").setAttribute("src",url);
            }
        </script>
    </body>
</html>